import Vue from 'vue'

Vue.directive('focus', {
  // 当指令所在DOM元素插入到了DOM中，只触发一次
  inserted (el) {
    focus(el)
  },
  // 当指令所在组件数据发生改变的时候都会触发
  update (el) {
    focus(el)
  }
})
function focus (el) {
  // 若指令用在原生标签,el就是原生DOM对象
  // 若指令用在了组件上(自定义标签),el就是当前组件的根元素(root element)
  // 如果本来就有input 或 textarea 直接让它聚焦
  if (['INPUT', 'TEXTAREA'].includes(el.tagName)) return el.focus()
  // 如果没有,让它找子元素看是否有 input 或 textarea ,让其聚焦
  let node = el.querySelector('input')
  if (node) return node.focus()
  node = el.querySelector('textarea')
  if (node) return node.focus()
  // 都没有,抛错
  throw new Error('指令出错了!')
}
